<template>
	<view class="container">
		<view class="top-info">
			<image class="top-bg" src="/static/images/invitbg.jpg" mode="widthFix"></image>
			<view class="qrcode2">
				<tki-qrcode ref="qrcode2" :val='val' :size="size" :onval="onval" :loadMake="loadMake"
				 :usingComponents="true" @result="qrR" />
			</view>
			<view class="copylink">
				<view class="link1" @click="copy(userInfo.invite_url,'邀请链接复制成功')">复制邀请链接</view>
			</view>
		</view>
		<view class="user-info">
			<view class="top">
				<view class="info">
					<image class="portrait" :src="userInfo.headimg || '/static/images/missing-face.png'"></image>
					<view class="detail">
						<text class="mobile">{{userInfo.mobile_temp}}</text>
						<text class="sub">注册时间: {{userInfo.addtime_text}}</text>
					</view>
				</view>
				<view class="invit">
					<text class="code"></text>
					<text class="sub"></text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import uniCopy from '@/components/uni-copy.js';
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	
	export default {
		components: {
			uniCopy
		},
		data() {
			return {
				token: '',
				userInfo: {
					mobile:'',
					addtime_text:'',
				},
				records: [],
				
				val: '', //要生成二维码的值
				size: 240, // 二维码大小
				unit: 'upx', // 单位
				background: '#b4e9e2', // 背景色
				foreground: '#309286', // 前景色
				pdground: '#32dbc6', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '', //生成后的图片 base64
				showLoading: true, //loading
				loadingText: 'loading内容', //loading内容
				
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.token = this.$api.get('token');
			if (!this.token) {
				uni.navigateTo({
					url: '/pages/public/login'
				});
				return;
			}
			//获取用户信息
			this.getmedate();
		},

		methods:{
			copy(txt, title = "复制成功") {
				uniCopy({
					content: txt,
					success: (res) => {
						uni.showToast({
							title: title,
							icon: 'none'
						})
						this.modalName = "";
					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000,
						})
					}
				})
			},
			//获取用户信息
			async getmedate() {
				const param_userinfo = {
					token: this.token
				};
				await this.$http.request('User', 'userinfo', 'GET', param_userinfo, res => {
					if (res.status == 1) {
						if (res.data.error == 0) {
							this.userInfo = res.data.data;
							this.val = res.data.data.invite_url;
							
							this.getaddress();
						}
					}
				});
			},
			getaddress(){
				this.$refs.qrcode2._makeCode();
			},
			
			qrR(res) {
				//console.log("图片地址："+res);
				this.src = res;
			},
			
		}
	}
</script>

<style lang='scss' scoped>
	%section{
		margin: 20upx 30upx;
		padding: 20upx 20upx;
		background-color: #ffffff;
		border-radius: 20upx;
	}
	.container{
		padding: 0 0 40upx 0;
		margin: 0;
		width: 100%;
		height: 100%;
		font-size: $font-base;
		background-color: #ff0000;
	}
	.top-info{
		text-align: center;
		position: relative;
		
		.top-bg{
			width: 100%;
		}
		
		.qrcode2{
			position: absolute;
			left: 0;
			top: 750upx;
			width: 100%;
			text-align: center;
		}
		.copylink{
			position: absolute;
			left: 0upx;
			top: 1193upx;
			margin-left: calc(50% - 150upx);
			
			.link1{
				width: 300upx;
				font-size: 36upx;
				border-radius: 10upx;
				line-height: 60upx;
				color: #ff0000;
			}
		}
	}
	
	.user-info{
		@extend %section;
		.bottom{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.item{
				width: 25%;
				display: flex;
				flex-direction: column;
				text-align: center;
				justify-content: center;
				padding: 20upx 0;
				image{
					width: 80upx;
					height: 80upx;
					margin: 0 auto;
				}
				text{
					padding-top: 10upx;
				}
			}
		}
		.top{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
		.info{
			display: flex;
			flex-direction: row;
		}
		.detail{
			display: flex;
			flex-direction: column;
		}
		.invit{
			display: flex;
			flex-direction: column;
			text-align: right;
		}
		.mobile{
			font-size: 30upx;
			font-weight: 600;
			padding-top: 10upx;
			padding-bottom: 10upx;
		}
		.code{
			font-size: 30upx;
			font-weight: 600;
			color: #09BD57;
			padding-bottom: 6upx;
		}
		.sub{
			color: $font-color-light;
			margin-top: 10upx;
		}
		.portrait{
			width: 100upx;
			height: 100upx;
			margin: 10upx;
			margin-right: 20upx;
		}
	}
	
</style>